import { Table, Card, Pagination, Field, DatePicker2, Form, Input, Badge, Button, Icon, Select } from '@alifd/next';
import { Link, useHistory } from 'ice';
import { myReturnList } from '../service';
import { useFusionTable } from 'ahooks';
import styles from './list.module.scss';
import { FormattedDate, FormattedMessage, useIntl } from 'react-intl';
import { getEnumLabel } from '@/utils/enum';
import { ShippingStatusEnums } from '@/pages/OperationCenter/LogisticsDetail/entity';
import TableEmptyBlock from '@/components/TableEmptyBlock';

const { RangePicker } = DatePicker2;

interface Props {
}

const FilterList: React.FunctionComponent<Props> = (): JSX.Element => {
  const history = useHistory();
  const intl = useIntl();
  const field = Field.useField([]);
  const { paginationProps, tableProps, search, error, refresh } = useFusionTable(
    myReturnList,
    {
      field,
    },
  );
  const { submit, reset } = search;

  return (
    <Card free>
      <Card.Content>
        <Form className="filter-form" responsive fullWidth labelAlign="left" field={field}>
          <Form.Item colSpan={4} label="订单号:">
            <Input name="orderNo" hasClear placeholder="请输入" />
          </Form.Item>
          <Form.Item colSpan={4} label="物流状态:" name="shippingStatus">
            <Select name="shippingStatus" hasClear dataSource={ShippingStatusEnums} />
          </Form.Item>
          <Form.Item colSpan={4} label="发货时间:">
            <RangePicker name="deliveryTime" />
          </Form.Item>
          <Form.Item colSpan={12} className={styles['form-actions']}>
            <Form.Submit type="primary" onClick={submit} validate style={{ marginRight: '20px' }}>
              <FormattedMessage id="btn.search" />
            </Form.Submit>
            <Form.Reset onClick={reset}><FormattedMessage id="btn.reset" /></Form.Reset>
          </Form.Item>
        </Form>
      </Card.Content>
      <Card.Content>
        <Table
          {...tableProps}
          isZebra
          emptyContent={<TableEmptyBlock error={error} onRefresh={refresh} />}
          primaryKey="shippingId"
        >
          <Table.Column title="订单号" dataIndex="orderNo" asyncResizable />
          <Table.Column
            dataIndex="productName"
            title="商品信息"
            asyncResizable
            cell={(val, i, row) => (
              <div className={styles.baseinfo}>
                <img
                  className={styles.img}
                  src={row.mainImage}
                  alt="商品主图"
                />
                <div>
                  <span className={styles.title}>{val}</span>
                  <div className={styles.row}>
                    <span>{`${row.brandName}/${row.categoryName}`}</span>
                    <span>{`规格:${row.attrValue || '无'}`}</span>
                  </div>
                </div>
              </div>
            )}
          />

          <Table.Column title="物流单号" dataIndex="shippingLabel" asyncResizable />
          <Table.Column title="退货原因" dataIndex="remark" asyncResizable />
          <Table.Column
            dataIndex="shippingStatus"
            title="状态"
            asyncResizable
            cell={(val) => (
              <div>
                <Badge
                  dot
                  style={{
                    marginRight: 5,
                    backgroundColor: getEnumLabel(ShippingStatusEnums, val, ['value', 'color']),
                  }}
                />
                {getEnumLabel(ShippingStatusEnums, val)}
              </div>
            )}
          />
          <Table.Column
            title="退货时间"
            dataIndex="shippingTime"
            asyncResizable
            cell={(val) => (<FormattedDate value={val} />)}
          />
          <Table.Column
            dataIndex="shippingId"
            title="操作"
            cell={(val, i, row) => (
              <Button type="primary" text>
                查看
              </Button>
            )}
          />
        </Table>
        <Pagination
          style={{ marginTop: 16, textAlign: 'right' }}
          shape="arrow-only"
          totalRender={(total) => (
            <FormattedMessage
              id="page.total"
              tagName="div"
              values={{ total }}
            />
          )}
          {...paginationProps}
        />
      </Card.Content>
    </Card>
  );
};

export default FilterList;
